<template>
  <el-dialog
    v-model="dialogVisible"
    width="300px"
    title="定额按次配置"
    :before-close="onCloseDialog"
  >
    <!-- 按次 -->
    <el-form ref="formRef" :rules="rules" :model="form.data">
      <el-form-item label="每次收费" prop="fee">
        <el-input v-model="form.data.fee" style="width: 320px">
          <template #append>元</template>
        </el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submitForm(formRef)">确 认 </el-button>
      <!-- <el-button  @click="onCloseDialog">取消 </el-button> -->
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, shallowRef } from "vue";
const emits = defineEmits(["operationDone"]);

const formRef = ref("");
const dialogVisible = ref(false);

const form = reactive({
  data: {
    method: 2,
  },
});

const rules = reactive({
  fee: [{ required: true, message: "请输入金额", trigger: "blur" }],
});

const init = (fee) => {
  dialogVisible.value = true;
  if (fee) {
    form.data.fee = fee;
  }
};

const onCloseDialog = () => {
  dialogVisible.value = false;
  form.data = {
    method: 2,
  };
  formRef.value?.clearValidate();
  formRef.value?.resetFields();
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      emits("operationDone", form.data);
      onCloseDialog();
    }
  });
};

defineExpose({
  init,
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  //   margin-top: 24px;
  .search-btn {
    display: flex;

    .confirm-btn {
      width: 65px;
      height: 32px;
      background: #007aff;
      border-radius: 2px;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
    }
  }
}
</style>
